<template>
  <div class="w_wrap">
    <div class="wtitle">
      <div>未来15天天气</div>
       <div>
          <button :class="tabFlag=='qs'?'active':''" @click="tabFlag='qs'">趋势</button>
          <button :class="tabFlag=='list'?'active':''" @click="tabFlag='list'">列表</button>
       </div>
    </div>
    <div class="w_content">
      <div v-if="tabFlag=='qs'">趋势</div>
      <div v-if="tabFlag=='list'">
          <weilai-list></weilai-list>
      </div>
    </div>
  </div>
</template>

<script>
import weilaiList from './weilaiList.vue'
export default {
  name: '2209vueWeilai',
  components:{
    weilaiList
  },
  props:{
    forecast_list:{ //未来15天天气
      type:String,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      tabFlag:"qs",//qs 趋势  list 列表
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>
<style lang="less" scoped>
    .w_wrap{
        width:792px;
        margin:100px auto;
        // background:red;
    }
    .wtitle{
      width:792px;
      margin:20px auto;
      display:flex;
      justify-content:space-between;
      button{
        margin-left:10px;
        &.active{
          background:skyblue;
          color:white;
        }
      }
    }
</style>